<template>
  <view class="example-container">
    <view class="example-section">
      <text class="section-title">通用选择器示例</text>
      
      <!-- 单选示例 -->
      <view class="example-item">
        <text class="example-label">单选示例 - 选择疾病：</text>
        <view class="selector-trigger" @click="showDiseaseSelector">
          <text class="selector-text">
            {{ selectedDisease ? selectedDisease.name : '请选择疾病（开发中）' }}
          </text>
          <text class="selector-arrow">▼</text>
        </view>
      </view>
      
      <!-- 多选示例 -->
      <view class="example-item">
        <text class="example-label">多选示例 - 选择标签：</text>
        <view class="selector-trigger" @click="showTagSelector">
          <text class="selector-text">
            {{ selectedTags.length > 0 ? `已选择${selectedTags.length}个标签` : '请选择标签' }}
          </text>
          <text class="selector-arrow">▼</text>
        </view>
      </view>
      
      <!-- 显示选择结果 -->
      <view v-if="selectedDisease" class="result-section">
        <text class="result-title">选中的疾病：</text>
        <text class="result-content">{{ selectedDisease.name }}</text>
      </view>
      
      <view v-if="selectedTags.length > 0" class="result-section">
        <text class="result-title">选中的标签：</text>
        <view class="tag-list">
          <view v-for="tag in selectedTags" :key="tag.id" class="tag-item">
            {{ tag.name }}
          </view>
        </view>
      </view>
    </view>

    <!-- 疾病选择器 -->
    <GenericSelector
      :visible="showDiseasePopup"
      @update:visible="showDiseasePopup = $event"
      @close="closeDiseaseSelector"
      @confirm="handleDiseaseSelect"
      title="选择疾病"
      search-placeholder="搜索疾病名称..."
      api-url="/health_disease/healthDisease/list"
      :params="diseaseParams"
      :field-mapping="{
        key: 'id',
        title: 'name',
        subtitle: 'description'
      }"
      :search-fields="['name', 'description']"
      :multiple="false"
    />

    <!-- 标签选择器 -->
    <GenericSelector
      :visible="showTagPopup"
      @update:visible="showTagPopup = $event"
      @close="closeTagSelector"
      @confirm="handleTagSelect"
      title="选择标签"
      search-placeholder="搜索标签名称..."
      api-url="/api/tags/list"
      :params="tagParams"
      :field-mapping="{
        key: 'id',
        title: 'name',
        subtitle: 'category'
      }"
      :search-fields="['name', 'category']"
      :multiple="true"
      :selected-items="selectedTags"
    />
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import GenericSelector from '@/components/GenericSelector.vue'

// 疾病选择相关
const showDiseasePopup = ref(false)
const selectedDisease = ref<any>(null)
const diseaseParams = ref({
  page: 1,
  size: 100,
  status: 'active'
})

// 标签选择相关
const showTagPopup = ref(false)
const selectedTags = ref<any[]>([])
const tagParams = ref({
  page: 1,
  size: 50
})

// 疾病选择器方法
const showDiseaseSelector = () => {
  showDiseasePopup.value = true
}

const closeDiseaseSelector = () => {
  showDiseasePopup.value = false
}

const handleDiseaseSelect = (disease: any) => {
  selectedDisease.value = disease
  console.log('选中的疾病:', disease)
}

// 标签选择器方法
const showTagSelector = () => {
  showTagPopup.value = true
}

const closeTagSelector = () => {
  showTagPopup.value = false
}

const handleTagSelect = (tags: any[]) => {
  selectedTags.value = tags
  console.log('选中的标签:', tags)
}
</script>

<style scoped lang="scss">
.example-container {
  padding: 32rpx;
  
  .example-section {
    .section-title {
      font-size: 36rpx;
      font-weight: 600;
      color: #111827;
      margin-bottom: 32rpx;
      display: block;
    }
    
    .example-item {
      margin-bottom: 32rpx;
      
      .example-label {
        font-size: 28rpx;
        color: #374151;
        margin-bottom: 16rpx;
        display: block;
      }
      
      .selector-trigger {
        border: 1rpx solid #e5e7eb;
        border-radius: 12rpx;
        background: white;
        cursor: pointer;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 24rpx 32rpx;
        
        &:hover {
          border-color: #3b82f6;
        }
        
        .selector-text {
          font-size: 28rpx;
          color: #374151;
          flex: 1;
        }
        
        .selector-arrow {
          font-size: 24rpx;
          color: #9ca3af;
          margin-left: 16rpx;
        }
      }
    }
    
    .result-section {
      margin-top: 32rpx;
      padding: 24rpx;
      background: #f8f9fa;
      border-radius: 12rpx;
      
      .result-title {
        font-size: 28rpx;
        font-weight: 600;
        color: #111827;
        margin-bottom: 16rpx;
        display: block;
      }
      
      .result-content {
        font-size: 26rpx;
        color: #374151;
        line-height: 1.5;
      }
      
      .tag-list {
        display: flex;
        flex-wrap: wrap;
        gap: 16rpx;
        
        .tag-item {
          padding: 12rpx 24rpx;
          background: #3b82f6;
          color: white;
          border-radius: 20rpx;
          font-size: 24rpx;
        }
      }
    }
  }
}
</style>
